<template>
	<div class="wrap">
		<div class="box">
			<div class="box_l">
				<img v-img-url="bgimg_url" class="img" />
			</div>
			<div class="box_r">
				<div class="title">欢迎登录</div>
				<div class="desc">{{ supplier_name || '多商户商城客服平台' }}</div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="0px"
					size="large">
					<!--用户名-->
					<el-form-item prop="account"><el-input type="text" v-model="ruleForm.account" auto-complete="off"
							placeholder="账号"></el-input></el-form-item>
					<!--密码-->
					<el-form-item prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass"
							auto-complete="off" placeholder="密码"></el-input></el-form-item>
					<!--验证码-->
					<el-form-item prop="code" style="line-height: 0px" v-if="codeImage">
						<div class="d-b-c">
							<div class="left-img-input" style="width: auto; margin-bottom: 0">
								<el-input v-model="ruleForm.code" ref="code" placeholder="验证码" class="l-input"
									style="width: 170px"></el-input>
							</div>
							<div class="identifybox" style="height: 40px; flex-shrink: 0" @click="getData">
								<el-image class="codeImage" style="width: 135px; height: 40px" :src="codeImage" />
							</div>
						</div>
					</el-form-item>
					<!--登录-->
					<el-form-item><el-button type="primary" style="width:100%;" @click.native.prevent="SubmitFunc"
							:loading="logining">登录</el-button></el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import loginApi from '@/api/login.js';
	import bgimg from '@/assets/img/login_bg.png';
	import {
		useUserStore
	} from '@/store';
	const {
		afterLogin
	} = useUserStore();
	export default {
		data() {
			return {
				/*是否正在加载*/
				loading: true,
				/*系统名称*/
				supplier_name: '',
				/*背景图片*/
				bgimg_url: '',
				/*是否正在提交*/
				logining: false,
				/*表单对象*/
				ruleForm: {
					/*用户名*/
					account: '',
					/*密码*/
					checkPass: '',
					/*验证码*/
					code: '',
					/*验证码key*/
					codeKey: '',
				},
				/*验证规则*/
				rules: {
					/*用户名*/
					account: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					/*密码*/
					checkPass: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					/*验证码*/
					code: [{
						required: true,
						message: "请输入验证码",
						trigger: "blur",
					}, ]
				},
				/*基础配置*/
				baseData: {},
				/*验证码*/
				codeImage: "",
			};
		},
		created() {
			console.log(import.meta.env)
			this.getData();
		},
		methods: {
			/*获取基础配置*/
			getData() {
				let self = this;
				loginApi.base(true)
					.then(res => {
						self.loading = false;
						const {
							data: {
								server_bg_img,
								server_name,
								codeData: {
									codeImage,
									codeKey
								}
							}
						} = res;
						self.supplier_name = server_name;
						if (server_bg_img) {
							self.bgimg_url = server_bg_img;
						} else {
							self.bgimg_url = bgimg;
						}
						if (codeImage) {
							self.codeImage = codeImage;
							self.ruleForm.codeKey = codeKey;
						}
					})
					.catch(error => {
						self.loading = false;
					});
			},

			/*登录方法*/
			SubmitFunc(ev) {
				var self = this;
				this.$refs.ruleForm.validate(valid => {
					if (valid) {
						this.logining = true;
						var Params = {
							username: this.ruleForm.account,
							password: this.ruleForm.checkPass,
							code: this.ruleForm.code,
							codeKey: this.ruleForm.codeKey,
						};
						/*调用登录接口*/
						loginApi.login(Params, true)
							.then(async res => {
								this.logining = false;
								if (res.code == 1) {
									await afterLogin(res.data);
									this.logining = false;
									self.$router.push({
										path: '/service/index'
									})
								} else {
									if (this.codeImage) {
										this.getData();
									}
									ElMessage({
										message: '登录失败',
										type: 'error'
									});
								}
							})
							.catch(error => {
								if (this.codeImage) {
									this.getData();
								}
								//接口调用方法统一处理
								this.logining = false;
							});
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep(.el-input) {
		--el-input-border-color: #F4F6FA !important;
		--el-input-bg-color: #EEEEEE !important;
	}

	.wrap {
		/* width: 1200px;
  margin: 0 auto; */
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}

	.box {
		// min-width: 1200px;
		width: 100%;
		height: 100%;
		background: #ffff;
		display: flex;
		align-items: center;

		.box_l {
			flex: 1;
			height: 100%;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.box_r {
			width: 600px;
			padding: 0 148px;
			box-sizing: border-box;
			text-align: center;

			.title {
				font-size: 25px;
				font-weight: bold;
				color: #333333;
			}

			.desc {
				padding: 12px 0;
				font-size: 14px;
				color: #333333;
			}

		}
	}
</style>